<template>
   <div class="list">
        <router-link
        tag="a" target="_blank"
        :to="{name:'designDetail', params: {id:item.id}}" 
        class="list-item"
        v-for="(item) of this.data"
        :key="item.id"

        >
            <div class="item-img"><img :src="item.url" alt=""></div>
            <div class="item-body">
                    <h1 class="name">
                        {{item.name}}
                        <span>了解更多></span>
                    </h1>
                    <p class="second_title">
                        <span>{{item.work}}</span>
                        <span>设计经验：{{item.years}}年</span>
                    </p>
                    <p class="style">擅长设计风格：{{item.style}}</p>
                    <p class="style">{{item.title}}</p>
                    <div class="detail">
                        <div 
                        class="detail-item"
                        v-for="(item2) of item.items"
                        :key="item2.id"
                        >
                            <img :src="item2.url2" alt="">
                        </div>
                        

                    </div>
            </div>
      </router-link>

        <!-- <router-link
        tag="a" target="_blank"
        :to="{name: 'newsDetail', params: {id:item.id}}" 
        class="list-item"
        v-for="(item) of this.data"
        :key="item.id"
        >
            <div class="item-img"><img :src="item.url" alt=""></div>
            <div class="item-body">
                <h1>{{item.first_title}}</h1>
                <p class="second-title">
                    <span>{{item.hit}}次</span>
                    <span>{{item.create_time}}</span>
                </p>
                <p class="guide">
                    {{item.second_title}}
                </p>
            </div>
        </router-link> -->
            
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'

export default {
  name: 'news-list',
  components:{
   
  },
  props:{
     
     data:Array 
  },
  data () {
    return {
        name:'',
        summary:''
    }
  },
  watch:{
    data(){
       for(var i =0;i<this.data.length;i++){
                if(this.data[i].img_url!=null){
                    this.url = this.data[i].img_url.url
                    // console.log(this.url)
                    this.data[i]['url'] = this.url
                }
                if(this.data[i].items!=null){
                    for(var b = 0;b<this.data[i].items.length;b++){

                        if(this.data[i].items[b].img_url!=null){
                            let url2 = this.data[i].items[b].img_url.url
                            this.data[i].items[b]['url2'] = url2
                            //  console.log(url2)
                        }

                   
                   
                    //  console.log('1')
                    }
                }

               
               
            }
            // console.log(this.data)
    }
  },
  computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
 
    
  },
  methods:{
   
  }
 
  
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
img 
    width 100%
.list
    
    float left 
    width 898px
    .list-item 
        display block
        overflow hidden
        background white
        height 300px
        margin-bottom 20px
        .item-img 
            float left
            width 226px
            height 280px
            margin 10px
            // background black
            overflow hidden
        .item-body 
            float right
            width 630px
            margin-top 20px
            margin-right 20px
            // background red
            height 226px
.name 
    font-size 23px
    color #3d4c51
    text-align left
.name>span 
    float right
    font-size 14px 
    color #7d8c92
.second_title 
    margin-top 10px
.second_title>span 
    font-size 14px 
    color #7d8c92
.second_title>span+span 
    margin-left 50px
.second_title 
    border-bottom 1px solid #00a6ba
    padding-bottom 17px
    margin-bottom 20px
.style 
    font-size 14px 
    color #7d8c92
    margin-bottom 10px
    text-overflow:ellipsis;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
.detail 
    overflow hidden
.detail-item 
    width 146px
    height 110px
    background black
    overflow hidden
    float left
.detail-item+.detail-item
    margin-left 15px
</style>
